<template>
  <div>
    <a-flex gap="middle">
      <a-range-picker v-model:value="dateRange" format="YYYY-MM-DD" :presets="rangePresets"/>

      <a-select
        v-model:value="kw"
        :options="sectors"
        option-filter-prop="name"
        :fieldNames="{'label':'name','value':'code'}"
        mode="multiple"
        :max-tag-count="2"
        :max-tag-placeholder="3"
        show-search
        allow-clear
        style="width: 280px"
        placeholder="Select a sector"></a-select>

      <a-button @click="getData" type="primary">查询</a-button>
    </a-flex>

    <div id="main" style="height: 666px;"></div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import { findCartesian } from "@/api/cartesian";
import { RangePicker,Select } from 'ant-design-vue';
import dayjs from "dayjs";
import { cloneDeep } from 'lodash';
import {filterObjectProperties} from "@/common/utils";
import {convertToChineseUnit} from "@/common/utils";




export default{
    components: {
      ARangePicker: RangePicker,
      ASelect: Select
    },
    computed:{
      ...mapState('app',['sectors'])
    },
    data(){
        return {
            kw: [],
            dateRange: [dayjs().subtract(30,'day'),dayjs()],
            myChart: null,
            options: [],
            rangePresets: [
              { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
              { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
              { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] }
            ]
        }
    },
    mounted(){

    
      var chartDom = document.getElementById('main');

      var myChart = echarts.init(chartDom,
          null,
          {renderer: "canvas"});


      this.myChart = myChart;

      this.getData();

    },
    methods:{
      getData(){
        let params = {}


        if (this.dateRange){
          params.startDate = dayjs(this.dateRange[0]).format("YYYY-MM-DD")
          params.endDate = dayjs(this.dateRange[1]).format("YYYY-MM-DD")
        }

        findCartesian(params).then(res=>{
          this.updateChart(res.data);
        })


      },
      updateChart(data){


        let isFilter = false;

        let days = [];
        let chartData = [];
        let lineName = [];


        let sectorMap = cloneDeep(this.sectors);

        if (this.kw.length){
          isFilter = true;
          sectorMap = sectorMap.filter(a=> this.kw.includes(a.code))
        }

        sectorMap.forEach(a=>{

            let lineData = [];

            data.forEach((b,bi)=>{

                let num = b[a.code];


                if (bi !== 0){
                    num = lineData[bi - 1] + num
                }

                lineData.push(num)
            })

            chartData.push({
                symbolSize: 10,
                emphasis: {
                    focus: 'series'
                },
                name: a.name,
                data:lineData,
                type: 'line'
            })
        })


        sectorMap.forEach(a=>{
            lineName.push(a.name)
        })

        data.forEach(a=>{
          days.push(dayjs(a.date).format("YYYY/MM/DD"));
        })

        console.log(chartData)
  

        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: lineName
            },
            xAxis: {
                type: 'category',
                data: days,
            },
            yAxis: {
                type: 'value'
            },
            series: chartData,
            grid: {
                left: '1%',
                right: '1%',
                bottom: '30%',
                containLabel: true
            },
            };

        this.myChart.clear();

        this.$nextTick(()=>{

            this.myChart.setOption(option);
        })



      }
    }
}

</script>
